import React from "react";
import './App.less';

export default class App extends React.Component {
    componentDidMount() {
        document.addEventListener('click', () => {
            console.log('native document bubble');
        });
        document.addEventListener('click', () => {
            console.log('native document capture');
        }, true);

        this.outer.addEventListener('click', () => {
            console.log('native outer bubble');
        });
        this.outer.addEventListener('click', () => {
            console.log('native outer capture');
        }, true);

        this.inner.addEventListener('click', () => {
            console.log('native inner bubble');
        });
        this.inner.addEventListener('click', () => {
            console.log('native inner capture');
        }, true);
    }

    syntheticOuterBubble = () => {
        console.log('synthetic outer bubble');
    };
    syntheticOuterCapture = () => {
        console.log('synthetic outer capture');
    };

    syntheticInnerBubble = () => {
        console.log('synthetic inner bubble');
    };
    syntheticInnerCapture = () => {
        console.log('synthetic inner capture');
    };

    render() {
        return <div className="outer"
            ref={x => this.outer = x}
            onClick={this.syntheticOuterBubble}
            onClickCapture={this.syntheticOuterCapture}
            >

            <div className="inner"
                ref={x => this.inner = x}
                onClick={this.syntheticInnerBubble}
                onClickCapture={this.syntheticInnerCapture}></div>
        </div>;
    }
};